#app {
  max-width: 100vw;
  //max-height: 100dvh;
  height: 100vh;
  min-width: 25rem;
  overflow: auto;
  background-image: url("/src/assets/images/background.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 0;

  // 背景模糊
  &:before {
    content: "";
    position: absolute;
    backdrop-filter: blur(0.4rem);
    height: 100vh;
    width: 100vw;
    z-index: 1;
  }
}

* {
  z-index: 2;
  box-sizing: border-box;
}

.pc {
  // 主要内容
  .content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    gap: 10rem;

    .left,
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .left {
      width: 100%;

      img {
        width: 14rem;
        margin-left: -1rem;
        user-select: none;
        -webkit-user-drag: none;
      }

      .platform {
        font-size: 1.6rem;
        padding: 1rem;

        span {
          &:hover {
            cursor: pointer;
          }
        }
      }
    }

    .right {
      .cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
        margin-top: 1rem;
      }
    }
  }
}

.mobile {
  // 主要内容
  .content {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;

    .left,
    .right {
      display: flex;
      flex-direction: column;
      width: 90%;
    }

    .left {
      img {
        width: 14rem;
        margin-left: -1rem;
        user-select: none;
        -webkit-user-drag: none;
      }

      .platform {
        font-size: 1.6rem;
        padding: 1rem;

        span {
          &:hover {
            cursor: pointer;
          }
        }
      }
    }

    .right {
      .cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
        margin-top: 1rem;

        .card {
          width: 100%;
        }
      }
    }
  }
}
